import React from 'react'
import { Button, Form, Input, message } from 'antd';
import loginApi from '../apis/login'
import { useNavigate } from 'react-router-dom';
import Logo from '../assets/images/logo.png'
export default function login() {
    const navigate = useNavigate()
    const onFinish = (values) => {
        loginApi.login(values).then(res => {
            console.log(res);
            if (res.status == 200) {
                localStorage.token = res.data.data.token
                localStorage.user = JSON.stringify(res.data.data.user)
                localStorage.permissions = JSON.stringify(res.data.data.permissions)
                localStorage.roles = JSON.stringify(res.data.data.roles)
                message.success('登录成功')
                navigate('/home')
            }
        })
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className='f-c-c h100vh' style={{backgroundColor:'#F0F2F5'}}>
            <div>
                <div className='f-c-c' style={{marginBottom:30}}>
                    <img src={Logo} alt="" />
                    <span style={{fontSize:28}}>赤兔养车</span></div>
                <div className='f-c-c' style={{fontSize:16,marginBottom:30}}>
                    <button style={{backgroundColor:'#F0F2F5',border:'none',color:'blue'}}>账号密码登录</button>
                    <button style={{backgroundColor:'#F0F2F5',border:'none'}}>手机号登录</button>
                </div>
                <div>
                    <Form
                        name="basic"
                        wrapperCol={{
                            span: 24,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 0,
                                span: 10,
                            }}
                        >
                            <Button type="primary" htmlType="submit" style={{width:200,}}>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>

    )
}
